<template>
    <el-form :model="localFormData" label-width="80px" :inline="true" class="seriesform" ref="extendsRef"
        :rules="rules">
        <el-form-item label="子集名称" prop="name">
            <el-input v-model="localFormData.name" placeholder="请输入子集名称"></el-input>
        </el-form-item>
        <el-form-item label="集号" prop="episodenum">
            <el-input v-model="localFormData.episodenum" placeholder="请输入集号"></el-input>
        </el-form-item>
        <media-thumb :formData="localFormData" />
        <el-form-item prop="programtype" label="节目类型">
            <el-select v-model="localFormData.programtype" placeholder="请选择节目类型">
                <el-option v-for="item in programTypeData" :key="item.value" :label="item.text" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="别名" prop="alias">
            <el-input v-model="localFormData.alias" placeholder="请输入别名"></el-input>
        </el-form-item>
        <el-form-item prop="cpid" label="内容提供方">
            <el-select v-model="localFormData.cpid" placeholder="请选择内容提供方" @change="handleCpChange" clearable
                @clear="handleClear('cp')" :disabled="cpidDisabled">
                <el-option v-for="item in mediaCpList" :key="item.cpid" :label="item.name" :value="item.cpid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="来源ID" prop="sourceid">
            <el-input v-model="localFormData.sourceid" placeholder="请输入来源ID" :disabled="sourceidDisabled"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="duration">
            <el-input v-model="localFormData.duration" placeholder="请输入时长"></el-input>
        </el-form-item>
        <el-form-item prop="abstract" label="子集简介" class="txtareabox">
            <el-input
                v-model="localFormData.abstract"
                maxlength="255"
                show-word-limit
                type="textarea"
                placeholder="请输入子集简介"
            ></el-input>
        </el-form-item>
        <el-form-item prop="content" label="子集详情" class="txtareabox">
            <el-input v-model="localFormData.content" type="textarea" placeholder="请输入子集详情"></el-input>
        </el-form-item>
    </el-form>
</template>

<script>
    import {  ref, toRef, reactive } from 'vue'
    import { getCps } from "@/api/cp"
    import MediaThumb from '@/views/media/media/components/EditExtends/MediaThumb'
    import programTypeMixin from "@/mixins/programTypeMixin";
    export default {
        name: "",
        components: {
            MediaThumb
        },
        props: {
            formData: {
                type: Object
            },
        },
        setup(props) {
            const localFormData = toRef(props, 'formData')
            const extendsRef = ref('')

            const rules = reactive({
                name: { required: true, message: '请输入子集名称', trigger: 'blur' },
                episodenum: { required: true, message: '请输入集号', trigger: 'blur' }
            })
            
            // 内容提供方
            const cpidDisabled = ref(false)
            const sourceidDisabled = ref(true)
            if (localFormData.value.cpid) {
                sourceidDisabled.value = false
            }
            const mediaCpList = ref([])
            getCps({ pagesize: 1000 }).then(response => {
                if (response.errcode == 0) {
                    mediaCpList.value = response.data.list
                } else {
                    console.log(response)
                }
            })
            const handleCpChange = () => {
                localFormData.value.sourceid = ''
                sourceidDisabled.value = false
            }
            const handleClear = (clearname) => {
                switch (clearname) {
                    case 'cp':
                        sourceidDisabled.value = true
                        localFormData.value.sourceid = ''
                        break
                }
            }

            // 封面
            localFormData.value.thumb == undefined ? localFormData.value.thumb = [] : ''

            // 节目类型
            const { programTypeData } = programTypeMixin()
            return {
                localFormData,
                extendsRef,
                rules,
                cpidDisabled,
                sourceidDisabled,
                mediaCpList,
                handleCpChange,
                handleClear,
                programTypeData,
            }
        }
    }
</script>

<style lang="scss">
    .dpformitem{
        .el-form-item__content{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
</style>